<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<title>内容录入</title>
		<link rel="stylesheet" href="./editor.md-master/css/editormd.min.css" />
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="./style/style.css" />
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="section type">
				<div class="radio-box" v-for="item in typeArr" :class="{checked:item.id==currentId}">
					<label :for="item.name" @click="initEditor(item.id)"></label>
					<input :id="item.name" type="radio" :value="item.id" name="type" v-model="currentId" />{{item.name}}
				</div>
				<div class="radio-box" v-if="typeArr.length>0">
					<input type="text" v-model="typeArr[currentId-1].src" placeholder="图片地址" />
				</div>
				<div class="radio-box">
					<input type="button" data-toggle="modal" data-target="#choose" value="生成" @click="getMd()" />
				</div>
				<div class="modal fade" id="choose" tabindex="-1" role="dialog" aria-labelledby="chooseLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="chooseLabel">生成代码</h4>
							</div>
							<div class="modal-body">
								<template v-for="(item,i) in typeArr" v-if="currentId==i+1">
									<div class="radio-box" v-for="(obj,attr) in item.output" :class="{checked:attr==item.currentType}">
										<label :for="obj.type" @click="item.currentType=attr"></label>
										<input :id="obj.type" type="radio" name="o-type" :value="obj.type" />{{obj.type}}
									</div>
									<br />
									<div class="radio-box">
										<button type="button" class="btn btn-xs btn-primary" @click="save(item)">保存</button>
										<template v-for="(val,x) in item.preview">
											<span class="label label-success" @click="remove(item,x)">{{val.type}}<i class="red-dot" v-show="unsave && x == item.currentType"></i></span>
										</template>
									</div>
								</template>
							</div>
							<div class="modal-footer">
								<button type="button" data-dismiss="modal" data-toggle="modal" class="btn btn-default" @click="code=false">预览</button>
								<button type="button" data-dismiss="modal" data-toggle="modal" data-target="#myModal" class="btn btn-primary">确定</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal -->
				</div>
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div v-show="code" class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="myModalLabel">代码</h4>
							</div>
							<div class="modal-body" style="max-height: 550px;overflow: auto;">{{codeHtml}}</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-info" data-dismiss="modal" @click="edit()">修改</button>
								<button type="button" class="btn btn-default" data-dismiss="modal" @click="code=true">关闭</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal -->
				</div>
			</div>
			<div class="demo-bg" v-if="!code">
				<div class="demo-box">
					<button type="button" class="close" @click="code=true;">&times;</button>
					<iframe :src="typeArr[currentId-1].demoSrc"></iframe>
				</div>
			</div>
			<div id="editormd">
				<textarea style="display:none;"></textarea>
			</div>
		</div>
		<script src="./js/vue.js"></script>
		<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="./editor.md-master/lib/marked.min.js"></script>
		<script src="./editor.md-master/lib/prettify.min.js"></script>
		<script src="./editor.md-master/lib/raphael.min.js"></script>
		<script src="./editor.md-master/lib/underscore.min.js"></script>
		<script src="./editor.md-master/lib/sequence-diagram.min.js"></script>
		<script src="./editor.md-master/lib/flowchart.min.js"></script>
		<script src="./editor.md-master/lib/jquery.flowchart.min.js"></script>
		<script src="./editor.md-master/editormd.min.js"></script>
		<script src="./editor.md-master/plugins/font-color-dialog/font-color-dialog.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="./js/main.js"></script>
	</body>
</html>
